/*
 * @Author: yangzonglong
 * @Date: 2021-03-09 16:03:48
 * @version: v1.0.0
 * @Descripttion: 处理select radio 选项设置
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-05 09:26:49
 * @Auditor:
 */
import React, { useCallback, useState } from 'react';
import { Form, Button, Modal } from 'antd';
import ButtonController from './ButtonController';
import uuid from 'uuid-v4';
import update from 'immutability-helper';
import ButtonGroupItem, { LineProps } from './ButtonGroupItem';
import Icon from '../../icon/Icon';
import styles from './style.module.scss';

const FormItem = Form.Item;

const createDataItem = (dataSource: DataItem[]) => {
  const curTotal = (dataSource?.length || 0) + 1;
  return { text: '按钮' + curTotal, type: 'default', scriptText: '', key: uuid() };
};


interface DataItem {
  label: string;
  key?: string;
}

interface IProps {
  changeControlProps(v?: any[]): void;
  dataSource?: any[];
  tabSource?: any[];
}

const ButtonGroupControll = ({ dataSource, changeControlProps, tabSource }: IProps) => {

  const [visible, setVisible] = useState(false)
  const [index, setIndex] = useState(0)
  const [initialValues, setInitialValues] = useState<object>({})

  const remove = useCallback(
    (index: number) => {
      changeControlProps(
        update(dataSource, {
          $splice: [[index, 1]],
        })
      );
    },
    [changeControlProps, dataSource]
  );

  const onOk = async () => {
    setVisible(false)
    changeControlProps(
      dataSource?.map((item, i) => i === index ? { ...item, ...initialValues } : item)
    );
  }

  const add = useCallback(() => {
    changeControlProps(
      update(dataSource, {
        $push: [createDataItem(dataSource!)],
      })
    );
  }, [changeControlProps, dataSource]);


  const move = useCallback(
    (draggedId: string, hoverId: string) => {
      let draggedIndex: number = 0,
        hoverIndex: number = 0;

      dataSource?.forEach((item, index) => {
        if (item.key === draggedId) draggedIndex = index;
        if (item.key === hoverId) hoverIndex = index;
      });

      changeControlProps(
        update(dataSource, {
          $splice: [
            [draggedIndex, 1],
            [hoverIndex, 0, dataSource?.[draggedIndex]],
          ],
        })
      );
    },
    [changeControlProps, dataSource]
  );

  const editInModalFn = useCallback((item: LineProps, index: number) => {
    setVisible(true)
    setIndex(index)
    setInitialValues(item)
  }, [])


  const onChange = (v: object) => {
    setInitialValues(prev => ({ ...prev, ...v }))
  }

  return (
    <FormItem label='头部按钮组'>
      <ul className={styles.options}>
        {dataSource?.map((item, i) => (
          <ButtonGroupItem
            remove={remove}
            move={move}
            editInModal={editInModalFn}
            originalIndex={i}
            key={item.key}
            item={item} />
        ))}
      </ul>
      <p />
      <Button className={styles.btnStyle} icon={<Icon icon="&#xe635;" />} block onClick={add}>
        添加按钮
      </Button>

      <Modal title='编辑' onOk={onOk} destroyOnClose visible={visible} onCancel={() => setVisible(false)} width={500} bodyStyle={{ height: '50vh', overflow: 'auto' }}>
        <Form>
          <ButtonController tabSource={tabSource} initialValue={initialValues} onChange={onChange} />
        </Form>
      </Modal>
    </FormItem>
  );
};

export default ButtonGroupControll;
